﻿$(document).ready(function () {
    $('#search').click(function () {

        var searchType = $('input:radio[name=searchType]:checked').val();
        var searchTerm = $('#searchTerm').val();

        // Manual JSON create listed here for comparison.
        // var fooSearchViewModel = '{"searchTerm": "' + searchTerm + '",' + '"searchType": "' + searchType + '"}';
        var fooSearchViewModel = JSON.stringify({ SearchType: searchType, SearchTerm: searchTerm });

        $.ajax({
            url: '/Foo/Foos',
            cache: false,
            type: 'POST',
            data: fooSearchViewModel,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',

            beforeSend: function () {
                 ShowLoader();
            },
            success: function (context) {
                 ShowFoos(context["Data"]);
            },
            error: function () {
            }
        });
    });
});

function ShowLoader() {
    $('#loader').css({ display: 'inline' });
}

function PostSuccess(context) {
    if (context["Success"] === true) {
        ShowFoos(context["Data"]);
    }
}

function ShowFoos(foos) {
    $('#loader').fadeOut(200);
    if (foos.length > 0) {
        var html = '<div id="items">';

        $.each(foos, function (i) {
            html += '<div id="foo' + i + '">' + foos[i].Foo1 + '</div>';
        });

        html += "</div>";

        $("#results").html(html);
    }
    else {
        $("#results").html('Your search did not return any results.');
    }
    $("#results").show();
}